<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-row>
        <el-col style="width: 250px">
          <el-form-item label="出库单名称" prop="outboundName">
            <el-input v-model="form.outboundName"/>
          </el-form-item>
        </el-col>
        <el-col style="width: 250px">
          <el-form-item label="仓库" prop="warehouseCode">
            <el-select
              v-model="form.warehouseCode"
              placeholder="请选择仓库"
              clearable
            >
              <el-option
                v-for="w in warehouseList"
                :key="w.id"
                :label="w.warehouseName"
                :value="w.warehouseCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 250px">
          <el-form-item label="出库人员" prop="employeeId">
            <el-select
              v-model="form.employeeId"
              placeholder="请选择出库人员"
              clearable
            >
              <el-option
                v-for="e in employeeList"
                :key="e.userId"
                :label="e.nickName"
                :value="e.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="goodsList">
        <el-table-column label="商品名称" align="center" prop="goodsName" />
        <el-table-column label="商品规格" align="center" prop="specificationName" />
        <el-table-column label="销售价格" width="100" align="center" prop="price" />
        <el-table-column label="数量" align="center" prop="buyNum" />
        <el-table-column label="金额" align="center">
          <template slot-scope="scope">
            {{ calculateCountPrice(scope) }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
        <!--        <template slot-scope="scope">-->
        <!--          <el-button-->
        <!--            size="mini"-->
        <!--            type="text"-->
        <!--            icon="el-icon-delete"-->
        <!--            @click="handleDelete(scope.$index)"-->
        <!--            v-if="scope.$index !== (goodsList.length - 1)"-->
        <!--          >删除</el-button>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
      </el-table>
      <el-row>
          <el-form-item label="出库单备注" prop="mark">
            <el-input v-model="form.mark"/>
        </el-form-item>
      </el-row>
    </el-form>
    <el-button type="info" icon="el-icon-plus" v-if="this.$route.query.data !== '详情'" @click="guanLianDingDan()">关联订单</el-button>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="submitForm()" v-if="this.$route.query.data !== '详情'">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="guanlian" width="1000px">
      <el-table :data="orderList">
        <el-table-column label="订单编号" align="center" prop="orderCode" />
        <el-table-column label="店铺名" align="center" prop="businessName" />
        <el-table-column label="订单金额" width="100" align="center" prop="amount" />
        <el-table-column label="仓库管理人" align="center" prop="warehouseName" />
        <el-table-column label="订单备注" align="center" prop="mark" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-plus"
              @click="guanLian(scope.row)"
            >关联订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import { getOutbound, addOutbound, getUserList, getGoodsList, getWarehouseList, getOrderList} from "@/api/inventory/outbound";
import row from "element-ui/packages/row";
export default {
  name: "addOutbound",
  data() {
    return {
      orderCode: '',
      guanlian: false,
      form: {},
      warehouseList: [],
      employeeList: [],
      orderList: [],
      goodsList: [],
      rules: {
          outboundName: [
            {required: true, message: '出库单名不能为空'}
          ],
          employeeId: [
            {required: true, message: '出库人员不能为空'}
          ],
          warehouseCode: [
            {required: true, message: '仓库不能为空'}
          ]
      },
    }
  },
  created() {
    this.getWarehouseList();
    this.getUserList();
    if (this.$route.query.outboundCode !== undefined) {
      getOutbound(this.$route.query.outboundCode).then(response => {
        console.log(response.data);
        this.form = response.data;
      })
    }
    if (this.$route.query.orderCode !== undefined) {
      this.guanLian({orderCode: this.$route.query.orderCode});
    }
  },
  computed: {
    outboundNum() {
      return this.goodsList.slice(0,this.goodsList.length - 1).reduce((sum, item) => {
        return sum +(parseInt(item.buyNum));
      }, 0);
    }
  },
  methods: {
    // 查询仓库列表
    getWarehouseList() {
      getWarehouseList().then(response => {
        this.warehouseList = response.data;
      })
    },
    calculateCountPrice(scope) {
      if (scope.$index === (this.goodsList.length - 1)) {
        let total = 0;
        for (let i = 0; i < this.goodsList.length; i++) {
          total = total + this.goodsList[i].countPrice;
        }
        return total;
      }
      scope.row.countPrice = scope.row.price * scope.row.buyNum;
      return scope.row.price * scope.row.buyNum;
    },
    // 出库人员列表
    getUserList() {
      getUserList().then(response => {
        this.employeeList = response.data;
      })
    },
    // 关联订单按钮
    guanLianDingDan() {
      if (this.form.warehouseCode === undefined) {
        this.$modal.msgError("仓库不能为空");
        return;
      }
      //得到订单列表
      getOrderList(this.form.warehouseCode).then(response => {
        this.orderList = response.data;
      });
      this.guanlian = true;
    },
    // // 删除当前行
    // handleDelete(index) {
    //   this.goodsList.splice(index , 1);
    //   this.goodsList[this.goodsList.length - 1].price = this.totalPrice;
    // },
    // 订单列表关联
    guanLian(row) {
      getGoodsList(row.orderCode).then(response => {
        this.orderCode = row.orderCode;
        this.goodsList = response.data;
        const newRow = {
          buyNum: 0,
          countPrice: 0,
        }
        this.goodsList.push(newRow);
        this.goodsList[this.goodsList.length-1].buyNum = this.outboundNum;
      });
      this.guanlian = false;
    },
    // 提交按钮
    submitForm() {
      if (this.goodsList.length === 0) {
        this.$modal.msgError("出库表单数据不全,提交失败");
        return;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.orderCode = this.orderCode;
          this.form.outboundNum = this.outboundNum;
          addOutbound(this.form).then(response => {
            this.close();
            location.href = "http://localhost/inventory/outbound";
          })
        }
      })
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/inventory/outbound" };
      this.$tab.closeOpenPage(obj);
    },
  }
}
</script>


